<!DOCTYPE html>
<html lang="zh">
<head>
  <title>下拉刷新：ion-refresh</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<body ng-app="starter">
<ion-header-bar class="bar-positive">
  <h4 class="title">这里是头部</h4>
</ion-header-bar>

<ion-content ng-controller="myCtrl" on-scroll="onScroll()" on-scroll-complete="onScrollComplete()">
  <!--NOTE
      prop pulling-ico str 当用户向下拉动数据时显示的图标
      prop pulling-text str 当用户向下拉动数据时显示的文本
      prop spinner str 可选，加载时显示转轮等待指示框
      event on-refresh exp
      event on-pulling exp
  -->

  <ion-refresher pulling-text="正在刷新页面数据..." on-refresh="doRefresh()"></ion-refresher>
  <ul class="list">
    <li class="item" ng-repeat="item in items">{{item}}</li>
  </ul>
</ion-content>

<ion-footer-bar class="bar-positive">
  <h4 class="title">这里是底部</h4>
</ion-footer-bar>

<script src="../../lib/ionic/js/ionic.bundle.js"></script>
<script src="../../js/app.js"></script>
<script>
  angular.module("starter", ["ionic"]).controller("myCtrl", function ($scope, $timeout) {
    //初始化数据
    $scope.items = [];
    for (let i = 1; i <= 20; i++) {
      $scope.items.push(`第${i}条数据`);
    }
    //刷新事件调用函数
    $scope.doRefresh = function () {
      $timeout(function () {
        for (let i = 1; i <= 20; i++) {
          $scope.items.push(`下拉载入第${i}条数据`);
        }
        //停止广播ion-refresher
        $scope.$broadcast("scroll.refreshComplete");
      })
    }
  })
</script>
</body>
</html>
